<template>
  <el-card>
    <div slot="header">
      <h3>修改品类-表单查看页面</h3>
    </div>
    <el-row>
      <SkusTable
        :defaultMinWidth="120"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
      />
    </el-row>
    <FooterFields :footerFields="footerFields" />
  </el-card>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { viewTableColumns } from './constants';
import { isResponseSuccess } from '@/utils/bizUtils';
export default {
  components: {
    SkusTable,
    FooterFields
  },
  data () {
    return {
      tableInfo: {
        list: [], // 表格数据
        columns: viewTableColumns, // 表格columns
        loading: false // 表格加载loading
      },
      footerFields: {},
      apiObj: {
        getRecordInfo: { // 单据信息查看(获取表格数据)
          url: '/sysback/modifySpuCategory/getRecordInfo',
          type: 'get'
        },
      }
    };
  },
  mounted () {
    const { recordNo } = this.$route.query;
    this.getTableDataFn(recordNo);
  },
  methods: {
    // 获取表格数据
    async getTableDataFn (recordNo) {
      const data = { recordNo };
      const { url, type } = this.apiObj.getRecordInfo;
      try {
        this.tableInfo.loading = true;
        const res = await ApiRequest(url, type, data);
        this.tableInfo.loading = false;
        if (isResponseSuccess(res)) {
          this.tableInfo.list = res.retData.modifiedSpuVoList;
          this.footerFields = res.retData;
        }
      } catch (err) {
        this.tableInfo.loading = false;
      }
    },
  }
}
</script>
